<template>
  <div id="global" v-title data-title="全国疫情分布">
    <el-alert
      title="因为数据原因，有些数据没有被渲染"
      type="error">
    </el-alert>
    <div class="globals" ref="global"></div>
  </div>
</template>

<script>
import '../../node_modules/echarts/map/js/world.js'
export default {
  data() {
    return {
      confirmedNum: []
    }
  },
  created() {
    this.getGlobal()
  },
  mounted() {
    this.confirmedNum = JSON.parse(localStorage.getItem('globalNum'))
    console.log(this.confirmedNum);
    this.initMap()
  },
  methods: {
    // 获取全球最新疫情数据
    async getGlobal() {
      await this.$axios.get('https://route.showapi.com/2217-5', {
        params: {
          showapi_appid: 951975.0,
          showapi_timestamp: '20220331094058',
          showapi_sign: 'b39a64fbc5e54221938719f2becc2737'
        }
      })
      .then((res) => {
        let arr = res.data.showapi_res_body.foreignList
        let arrList = []
        for(let i = 0; i < arr.length; i++) {
          let obj = {}
          obj.name = arr[i].countryFullName
          obj.value = arr[i].confirmedNum
          arrList.push(obj)
        }
        localStorage.setItem('globalNum', JSON.stringify(arrList))
      }).catch((err) => {
        console.log(err);
      })
    },
    initMap() {
      let myChart = this.$echarts.init(this.$refs.global)
      let option = {
        animation: true,
        title: {
          text: '全球疫情确诊病例统计',
          left: 'center',
          top: '10'
        },
        // 提示工具，触发时显示详细数据
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b}<br/>{c} 例',
          textStyle: {
            color: '#fff'
          }
        },
        // 视图映射工具，根据value来直观的显示数据所在区间
        visualMap: {
          min: 1000,
          max: 3000000,
          itemHeight: 100,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          left: 30,
          bottom: 20,
          inRange: {
            color: [
              '#abd9e9',
              '#e0f3f8',
              '#ffffbf',
              '#fee090',
              '#fdae61',
              '#f46d43',
              '#d73027'
            ]
          },
        },
        series: [
          {
            name: '确诊总数',
            type: 'map',
            map:"world",
            roam: false,
            data: this.confirmedNum,
            label: {
              show: true,
            },
            tooltip: {
              backgroundColor: 'rgba(51,51,51,0.7)',
              borderColor: '#fff',
              borderWidth: 1
            },
            zoom: 1.2,
            emphasis: {
              itemStyle: {
                areaColor: ''
              },
              label: {
                color: '#333'
              }
            }
          }
        ]
        // },
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
#global {
  width: 100%;
  height: 100%;
  .globals {
    width: 100%;
    height: 100%;
  }
}
</style>